<template>
	<div class="main">
		<el-tabs v-model="activeName">
			<el-tab-pane label="基本信息" name="first">
				<el-form :model="baseInfo" label-width="130px">
					<el-form-item label="联系人姓名:">
						<span>{{baseInfo.contName}}</span>
					</el-form-item>
					<el-form-item label="联系人手机号码:">
						<span>{{baseInfo.contPhone}}</span>
					</el-form-item>
					<el-form-item label="商户电话:">
						<span>{{baseInfo.custTel}}</span>
					</el-form-item>
					<el-form-item label="电子邮箱:">
						<span>{{baseInfo.customerEmail}}</span>
					</el-form-item>
					<el-form-item label="商户名(商户全称):">
						<span>{{baseInfo.merName}}</span>
					</el-form-item>
					<el-form-item label="商户名简称:">
						<span>{{baseInfo.merShortName}}</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>

			<el-tab-pane label="营业执照及法人信息" name="second">
				<el-form :model="farenInfo" label-width="220px">
					<el-form-item label="法人/负责人证件号码">
						<span>{{farenInfo.legalIdno}}</span>
					</el-form-item>
					<el-form-item label="法人/负责人姓名">
						<span>{{farenInfo.legalName}}</span>
					</el-form-item>
					<el-form-item label="统一社会信用码(营业执照编码)">
						<span>{{farenInfo.licenseCode}}</span>
					</el-form-item>
					<el-form-item label="注册地址">
						<span>{{farenInfo.regAddr}}</span>
					</el-form-item>
					<el-form-item label="经营地址">
						<span>{{farenInfo.custAddr}}</span>
					</el-form-item>
					<el-form-item label="法人/负责人身份证有效期">
						<span>{{farenInfo.legalIdExpires}}</span>
					</el-form-item>
					<el-form-item label="商户有效日期">
						<span>{{farenInfo.merStartValidDate}} 至 {{farenInfo.merValidDate}}</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="商户证照" name="third">
				<el-form :model="merchantPhoto" inline label-width="160px">
					<el-form-item label="法人身份证正面照">
						<el-image class="images" :src="merchantPhoto.legalCardFrontImg" @click="seeImages(merchantPhoto.legalCardFrontImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="法人身份证反面照">
						<el-image class="images" :src="merchantPhoto.legalCardBackImg" @click="seeImages(merchantPhoto.legalCardBackImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="营业执照(三证合一码)">
						<el-image class="images" :src="merchantPhoto.merchantLicenseImg" @click="seeImages(merchantPhoto.merchantLicenseImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="商户门头照">
						<el-image class="images" :src="merchantPhoto.doorHeadOneImg" @click="seeImages(merchantPhoto.doorHeadOneImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="经营场景照片1">
						<el-image class="images" :src="merchantPhoto.doorHeadTwoImg" @click="seeImages(merchantPhoto.doorHeadTwoImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="经营场景照片2">
						<el-image class="images" :src="merchantPhoto.doorHeadThreeImg" @click="seeImages(merchantPhoto.doorHeadThreeImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
					<el-form-item label="授权书扫描件（最多上传1张）" prop="certificateImg	">
						<el-upload class="avatar-uploader" :action="action" :headers="headers"
						:data="merchantType8" :limit="1" :file-list="certificateImg" :on-success="certificateImgSuccess" list-type="picture-card">
							<i class="el-icon-plus"></i>
							<div slot="file" slot-scope="{file}">
								<el-image class="images" :src="file.url" fit="cover"></el-image>
								<span class="el-upload-list__item-actions">
									<span
									class="el-upload-list__item-preview"
									@click="handlePictureCardPreview(file)"
									>
									<i class="el-icon-zoom-in"></i>
									</span>
								</span>
							</div>
						</el-upload>
					</el-form-item>
					<el-form-item label="其他资料图片（最多上传6张）" prop="otherImg">
						<el-upload class="avatar-uploader" style="float:left;margin-right:15px" list-type="picture-card" :action="action" :headers="headers"
							:data="merchantType9" :limit="6" :file-list="otherImgList" :on-success="otherImgSuccess">
							<i class="el-icon-plus"></i>
							<div slot="file" slot-scope="{file}">
								<el-image class="images" :src="file.url" fit="cover"></el-image>
								<span class="el-upload-list__item-actions">
									<span
									class="el-upload-list__item-preview"
									@click="handlePictureCardPreview(file)"
									>
									<i class="el-icon-zoom-in"></i>
									</span>
								</span>
							</div>
						</el-upload>
                	</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="绑卡/结算绑定信息" name="fourth">
				<el-form :model="bandInfo" label-width="200px">
					<el-form-item label="结算银行卡省份">
						<span>{{bandInfo.provValue}}</span>
					</el-form-item>
					<el-form-item label="结算银行卡地区">
						<span>{{bandInfo.areaValue}}</span>
					</el-form-item>
					<el-form-item label="结算银行账户类型">
						<span>{{bandInfo.bankAcctType==1?'对公':'对私'}}</span>
					</el-form-item>
					<el-form-item label="结算银行卡所属银行">
						<span>{{bandInfo.bankName}}</span>
					</el-form-item>
					<el-form-item label="结算银行卡号">
						<span>{{bandInfo.cardName}}</span>
					</el-form-item>
					<el-form-item label="开户许可证/小微负责人银行卡正面照" prop="accountOpeningBankImg">
						<el-image class="images" :src="bandInfo.accountOpeningBankImg" @click="seeImages(bandInfo.accountOpeningBankImg)"
						 :preview-src-list="srcList"></el-image>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="商户入驻信息" name="fifth">
				<el-form :model="comeinInfo" label-width="120px">
					<el-form-item label="经营类目">
						<span>{{comeinInfo.categoryOneName}}/{{comeinInfo.categoryTwoName}}/{{comeinInfo.categoryThreeName}}</span>
					</el-form-item>
					<el-form-item label="城市">
						<span>{{comeinInfo.provinceValue}},{{comeinInfo.cityCodeValue}},{{comeinInfo.districtValue}}</span>
					</el-form-item>
					<el-form-item label="商户种类">
						<span>{{comeinInfo.merType==3?'私营企业':comeinInfo.merType==5?'个体工商户':''}}</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="基本配置信息" name="six">
				<el-form :model="configInfo" label-width="120px">
					<el-form-item label="商品位数量">
						<span>{{configInfo.positionNum}}</span>
					</el-form-item>
					<el-form-item label="现金手续费比例">
						<span>{{configInfo.cashServiceRatio}}%</span>
					</el-form-item>
					<el-form-item label="糖果手续费比例">
						<span>{{configInfo.sweetServiceRatio}}%</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
			<el-tab-pane label="合同信息" name="seven">
				<el-form :model="contractInfo" label-width="160px">
					<el-form-item label="快步商务入住电子合同:">
						<el-link v-if="contractInfo.contractUrl" type="primary" :href="contractInfo.contractUrl" target="_blank">点击下载合同</el-link>
						<span v-else>暂无合同</span>
					</el-form-item>
					<el-form-item label="汇付天下支付服务合同:">
						<el-link v-if="contractInfo.signViewUrl" type="primary" :href="contractInfo.signViewUrl" target="_blank">点击下载合同</el-link>
						<span v-else>暂无合同</span>
					</el-form-item>
					<el-form-item label="商家用户手册:">
						<el-link v-if="contractInfo.handbookUrl" type="primary" :href="contractInfo.handbookUrl" target="_blank">点击下载合同</el-link>
						<span v-else>暂无手册</span>
					</el-form-item>
				</el-form>
			</el-tab-pane>
		</el-tabs>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				activeName: 'first',
				baseInfo: {},
				farenInfo: {},
				merchantPhoto: {
					certificateImg: '',
					otherImg: ''
				},
				srcList: [],
				bandInfo: {},
				comeinInfo: {},
				configInfo:{},
				contractInfo:{},
				action: '/wsj/' + this.$api.imageUpload,
				headers: {
					Authorization: 'Bearer ' + localStorage.getItem('token')
				},
				merchantType8: {
					mid: '',
					type: 8,
				},
				merchantType9: {
					mid: '',
					type: 9,
				},
				certificateImg: [],
				otherImgList: [],
				dialogVisible: false,
				dialogImageUrl: ''

			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				const loading = this.$loading({
					lock: true,
					text: '数据加载中。。。',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.$http.get(this.$api.baseInfo).then(res => {
					loading.close();
					this.baseInfo = res.data.firstDetail;
					this.farenInfo = res.data.secondDetail;
					this.merchantPhoto = res.data.thirdDetail;
					this.bandInfo = res.data.fourthDetail;
					this.comeinInfo = res.data.fifthDetail;
					this.configInfo = res.data.configInfo;
					this.contractInfo = res.data.contractInfo;
					if (res.data.thirdDetail.otherImg) {
						res.data.thirdDetail.otherImg.split(',').forEach(item => {
							this.otherImgList.push({url: item});
						})
					}
					if (res.data.thirdDetail.certificateImg) {
						this.certificateImg = [{url: res.data.thirdDetail.certificateImg}];
					}
					localStorage.setItem('merchantId',res.data.id);
					localStorage.setItem('merName',res.data.firstDetail.merName);
					localStorage.setItem('mobile',res.data.usrPhone)
					this.merchantType8.mid = localStorage.getItem('merchantId')
					this.merchantType9.mid = localStorage.getItem('merchantId')
				})
			},
			seeImages(url) {
				this.srcList = [];
				this.srcList.push(url)
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			certificateImgSuccess(res) {
				if (res.code == 0) {
				this.merchantPhoto.certificateImg = res.data;
				// this.pushImage();
				this.$message({
					type: "success",
					message: '上传成功！'
				});
				// this.getData();
				} else {
				this.$message({
					type: "success",
					message: '上传失败！' + res.msg
				})
				}
			},
			otherImgSuccess(res) {
				if (res.code == 0) {
				this.merchantPhoto.otherImg = res.data;
				// this.pushImage();
				this.$message({
					type: "success",
					message: '上传成功！'
				});
				// this.getData();
				} else {
				this.$message({
					type: "success",
					message: '上传失败！' + res.msg
				})
				}
			},
		}
	}
</script>

<style scoped>
	.main {
		padding: 15px;
		color: #434448;
	}

	.images {
		width: 280px;
		height: 160px;
		border-radius: 5px;
	}
	.avatar-small {
		width: 150px;
		height: 80px;
		display: block;
		border-radius: 5px;
	}
</style>
